<template>
	<view class="ads-box">
		<block v-if="adType == 1">
			<image class="ad-bg" :src="src"></image>
			<view class="ad-1 time" v-if="isTime && time > 0">{{time}}</view>
			<view class="ad-1 skip" @click="close" v-else>跳过</view>
		</block>
		<block v-else>
			<view class="ad-up" :style="{'backgroundColor':option.bgColor}">
				<view class="ad-time-box grid col-2">
					<view class="ad-time-box-text">广告</view>
					<view class="ad-time-box-time">{{time + '秒'}}</view>
				</view>
				<view class="ad-mini-box" @click="toAds()">
					<view class="ad-mini-box-img" :style="{'background-image':'url('+option.adImg+')'}"></view>
					<view class="ad-mini-box-dec">{{option.adDesc}}</view>
					<view class="ad-mini-box-btn">{{option.adBtn}}</view>
				</view>
				<view class="ad-skip-box" @click="close">跳过</view>
			</view>
			<view class="ad-down">
				<view class="ad-down-logo" :style="{'background-image':'url('+logo+')'}"></view>
				<view class="ad-down-text">{{appName}}</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	var timeout = null;
	export default {
		name: 'ads',
		props:{
			adType:{
				type:[String,Number],
				default:1
			},
			src:{
				type: String,
				default:'https://image.vshare.site/ads/2020ads.jpg'
			},
			isTime: {
				type: Boolean,
				default:true
			},
			logo:{
				type: String,
				default:'https://image.vshare.site/ads/2020ads.jpg'
			},
			option:{
				bgColor:'rgb(165, 103, 63,.8)',
				adAppid:'',
				adImg:'https://image.vshare.site/ads/2020ads.jpg',
				adDesc:'xxxxx',
				adBtn:'进入小程序',
				adType:1,
				adUrl:''
			}
		},
		data() {
			return {
				time: 3
			}
		},
		computed:{
			...mapState(['appName']),
		},
		created() {
			var that = this;
			var times = setInterval(function(){
				that.time = parseInt(that.time);
				if(that.time > 0){
					that.time -= 1;
				}else{
					clearInterval(times);
					timeout = setTimeout(function(){
						that.close();
					},2000);
				}
			},1000);
		},
		methods: {
			getAds(){
				
			},
			toAds(){
				if(this.option.adUrl){
					switch(this.option.adType){
						case 1:
							uni.navigateTo({
								url: this.option.adUrl
							})
							break;
						default:
							uni.navigateToMiniProgram({
							  appId: this.option.adAppid,
							  path: this.option.adUrl,
							  extraData: {
							  },
							  success(res) {
							    // 打开成功
							  }
							})
							break;
					}
				}
			},
			close(){
				if(timeout != null){
					clearTimeout(timeout)
					timeout = null;
				}
				this.$emit('click')
			}
		}
	}
</script>

<style>
.ad-bg{
	position: relative;
	height: 100vh;
	width: 100%;
	
}
.ads-box{
	z-index: 999;
}
.ads-box .ad-1{
	position: absolute;
	top: 80rpx;
	left: 50rpx;
	height: 50rpx;
	background-color: rgba(0,0,0,.6);
	color: #FFFFFF;
	text-align: center;
	line-height: 50rpx;
}
.time{
	width: 50rpx;
	border-radius: 50rpx;
}
.skip{
	width: 120rpx;
	border-radius: 25rpx;
}
/*  */
.ad-up{
	height: 80vh;
	width: 100%;
	background-color: rgb(165, 103, 63,.8);
	position: relative;
}
.ad-up .ad-time-box{
	height: 65rpx;
	width: 230rpx;
	border-radius: 35rpx;
	border: 1px solid rgba(159,116,63,.9);
	background-color: rgba(74,48,13,.6);
	line-height: 65rpx;
	text-align: center;
	color: #FFFFFF;
	position: absolute;
	top: 70rpx;
	left: 40rpx;
}
.ad-up .ad-time-box .ad-time-box-text{
	border-right: 1px solid rgba(159,116,63,.9);
}
.ad-up .ad-mini-box{
	width: 650rpx;
	height: 680rpx;
	background-color: #FFFFFF;
	-webkit-border-radius: 9px;
	border-radius: 20rpx;
	position: absolute;
	top: 200rpx;
	left: 50rpx;
}
.ad-up .ad-mini-box .ad-mini-box-img{
	width: 100%;
	height: 400rpx;
	background-color: #36A3F9;
	border-radius: 20rpx 20rpx 0 0;
}
.ad-up .ad-mini-box .ad-mini-box-dec{
	width: 100%;
	height: 100rpx;
	padding: 20rpx;
	font-size: 36rpx;
	text-align: center;
}
.ad-up .ad-mini-box .ad-mini-box-btn{
	height: 70rpx;
	width: 200rpx;
	line-height: 70rpx;
	background-color: #39B54A;
	color: #FFFFFF;
	border-radius: 10rpx;
	text-align: center;
	margin: 65rpx auto;
}
.ad-up .ad-skip-box{
	height: 65rpx;
	width: 135rpx;
	line-height: 65rpx;
	border-radius: 35rpx;
	border: 1px solid rgba(159,116,63,.9);
	background-color: rgba(74,48,13,.6);
	text-align: center;
	color: #FFFFFF;
	position: absolute;
	bottom: 30rpx;
	right: 40rpx;
	
}
.ad-down{
	height: 20vh;
	width: 100%;
	background-color: #FFFFFF;
	padding-top: 30rpx;
}
.ad-down .ad-down-logo{
	width: 100rpx;
	height: 100rpx;
	background-color: #808080;
	border-radius: 50rpx;
	margin: 0 auto;
}
.ad-down .ad-down-text{
	text-align: center;
	padding: 30rpx;
	font-size: 30rpx;
	color: #007AFF;
	font-weight: 400;
}
</style>
